<template>
  <div>
    <van-nav-bar left-arrow title="选择客户" @click-left="onClickLeft">
      <template #right>
        <img src="../assets/客户中心/首页按钮.png" alt="" height="21px" />
      </template>
    </van-nav-bar>
    <van-search v-model="value" show-action placeholder="请输入关键联系人">
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <van-cell-group>
      <van-cell
        :title="item.custName"
        :icon="require('../assets/客户中心/头像.png')"
        is-link
        center
        v-for="item in records"
        :key="item.id"
        @click="goNewVisits(item.id, item.custName)"
      />
    </van-cell-group>
  </div>
</template>

<script>
import { cust } from "../request/api";
export default {
  data() {
    return {
      value: "",
      records: [],
    };
  },
  created() {
    cust({
      keyword: this.value,
      current: 1,
      size: 8,
    }).then((res) => {
      console.log(res);
      this.records = res.data.records;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onSearch() {
      cust({
        keyword: this.value,
        current: 1,
        size: 8,
      }).then((res) => {
        console.log(res);
        this.records = res.data.records;
      });
    },
    goNewVisits(id, name) {
      this.$router.push({
        name: "vsitXZ",
        params: { id, name },
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
/deep/ .van-nav-bar {
  background-color: #003399;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-icon-arrow-left::before {
  font-size: 20px;
  color: #fff;
}
.van-search {
  margin-bottom: 10px;
}
.van-search__action {
  color: #003399;
}
.van-search__content {
  border-radius: 10px;
}
.van-cell-group {
  .van-cell {
    height: 60px;
    .van-icon__image {
      height: 40px;
      width: 40px;
      margin-right: 16px;
    }
    font-size: 16px;
    .van-cell__left-icon {
      height: 60px;
      margin-top: 20px;
    }
  }
}
</style>